<template>
  <div class="allbox">
    <van-nav-bar
      fixed
      placeholder
      safe-area-inset-top
      title="每日签到"
      left-arrow
      @click-left="back"
    />
    <div class="space"></div>
    <div class="content">
      <div class="topword">
        <div>每日签到 +1 奖励金</div>
        <div>当前周期已连续签到 {{ signnum }} 天</div>
        <div @click="show = true">签到规则</div>
      </div>
      <div class="plan-finish-calendar mtop1">
        <div class="calendar">
          <!-- 年份 月份 -->
          <ul class="month bottom-line">
            <!--点击会触发pickpre函数，重新刷新当前日期 -->
            <li class="arrow" @click="pickPre(currentYear, currentMonth)">
              <i class="mintuifont mintui-arrowright arrowleft"></i>
            </li>
            <li class="year-month">
              <span v-text="currentYear + '年' + currentMonth + '月'"></span>
            </li>
            <li class="arrow" @click="pickNext(currentYear, currentMonth)">
              <i class="mintuifont mintui-arrowright"></i>
            </li>
          </ul>
          <!-- 星期 -->
          <ul class="weekdays">
            <li>日</li>
            <li>一</li>
            <li>二</li>
            <li>三</li>
            <li>四</li>
            <li>五</li>
            <li>六</li>
          </ul>
          <!-- 日期 -->
          <ul class="days bottom-line">
            <li
              v-for="(day, index) in days"
              :key="index"
              @click="dayCheck(day)"
            >
              <!--本月已签到日期-->
              <span
                :day="day.day"
                :class="['day-li', day.isChecked ? 'day-checked' : '']"
              >
                <span
                  :class="[
                    'day-span',
                    day.isSign ? 'day-sign' : '',
                    day.day.getMonth() + 1 !== currentMonth ? 'other' : '',
                    day.isSigned ? 'day-signed' : '',
                  ]"
                  v-text="day.day.getDate()"
                ></span>
              </span>
            </li>
          </ul>
          <div class="signbtn" @click="show2 = true">立即签到</div>
        </div>
      </div>
      <div class="singtip">
        <div class="showword">
          2021.07.01-2021.07.31 连签有机会领取以下奖励：
        </div>
        <div class="stempbox">
          <div class="stemp">
            <div>连续7天</div>
            <div><span>5</span>奖励金</div>
            <img src="../../assets/coin-o.png" alt="" />
          </div>
          <div class="stemp">
            <div>连续15天</div>
            <div><span>10</span>奖励金</div>
            <img src="../../assets/coin-o.png" alt="" />
          </div>
          <div class="stemp">
            <div>连续30天</div>
            <div><span>30</span>奖励金</div>
            <img src="../../assets/coin-o.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <van-overlay :show="show">
      <div class="wrapper">
        <div class="rules">
          <div>签到规则</div>
          <div>1、用户每日在个人中心签到可获1奖励金奖励。</div>
          <div>2、用户连续在个人中心签到30天可获随机掉落奖励金奖励。</div>
          <div>
            3、用户每成功履约一次可获得相应奖励金。每在APP内成功付清房租视为成功履约，分值为5奖励金/月，房东、租客各获得相应奖励金。(例：房租季付，成功履约一次双方各得15奖励金)
          </div>
          <div>4、用户生日当天赠送10奖励金。</div>
          <div>5、用户获得4.5分以上好评,可获得10奖励金奖励。</div>
          <van-divider />
          <div @click="show = false">知道了</div>
        </div>
      </div>
    </van-overlay>
    <van-overlay :show="show2">
      <div class="wrapper">
        <div class="signtip">
          <div class="signsuccess">
            <div>签到成功</div>
            <div>以领取的奖励可以前往个人中心查看</div>
          </div>
          <div class="tosee">
            <div>
              <img src="../../assets/coin.png" alt="" />
              <div>奖励金:10</div>
              <div>查看</div>
            </div>
          </div>
          <van-icon
            @click="show2 = false"
            size="35"
            class="closebtn"
            name="cross"
          />
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentDay: 1, // 当前天
      currentMonth: 1, // 当前月
      currentYear: 1970,
      currentWeek: 0, // 一号所在的星期
      days: [], // 当月所有天数
      content: {},
      sign_days: [], // 签到日期
      is_sign: false,
      signnum: "",
      show: false,
      show2: false,
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    /**
     * 获取签到日期
     */
    getSign: function () {
      // 模拟数据
      this.sign_days = [
        {
          day: "2021/7/8",
          is_sign: 1,
        },
        {
          day: "2021/7/9",
          is_sign: 1,
        },
        {
          day: "2021/7/10",
          is_sign: 1,
        },
        {
          day: "2021/7/11",
          is_sign: 1,
        },
        {
          day: "2021/7/12",
          is_sign: 1,
        },
        {
          day: "2021/7/13",
          is_sign: 1,
        },
      ];
      this.signnum = this.sign_days.length;
      this.initData(null);
    },
    initData: function (cur) {
      var date;
      if (cur) {
        // 切换上一月、下一月
        date = new Date(cur);
      } else {
        var now = new Date(); // 此处取本机时间，应改为服务器时间
        var d = new Date(
          this.formatDate(now.getFullYear(), now.getMonth() + 1, 1)
        );
        d.setDate(35); // 设置天数为35天（32~59都可以，既设置到下一个月的某一天）
        date = new Date(this.formatDate(d.getFullYear(), d.getMonth(), 1));
      }
      this.currentDay = new Date().getDate(); // 今日日期 几号
      this.currentYear = date.getFullYear(); // 当前年份
      this.currentMonth = date.getMonth() + 1; // 当前月份
      this.currentWeek = date.getDay(); // 当前月1号是星期几？ 0表示星期天
      // 当前月最后一天是星期几？ 0表示星期天
      this.nextWeek = new Date(
        date.getFullYear(),
        date.getMonth() + 1,
        0
      ).getDay();
      var str = this.formatDate(this.currentYear, this.currentMonth, 1); // 2020/01/01
      var nextStr = new Date(
        date.getFullYear(),
        date.getMonth() + 1,
        0
      ).toLocaleDateString(); // 2020/01/01
      this.days = []; // 初始化日期
      // 设置上一个月 需显示 的最后几天  铺满一周
      for (var i = this.currentWeek; i > 0; i--) {
        d = new Date(str);
        d.setDate(d.getDate() - i);
        var dayobject = {
          day: d,
          isSign: this.isVerDate(d),
          isSigned: this.isSigned(d),
        }; // 用一个对象包装Date对象  以便为以后预定功能添加属性
        this.days.push(dayobject); // 将日期放入data 中的days数组 供页面渲染使用
      }
      // 显示当前月的天数  第二个循环为 j<= 36- this.currentWeek，
      // 因为1号是星期六的时候当前月需显示6行，如2020年8月
      this.num = 0; //第几个月 每遇到1号加1
      for (var j = 0; j <= 36 - this.currentWeek; j++) {
        d = new Date(str);
        d.setDate(d.getDate() + j);
        var dddd = d.getDate();
        dayobject = {
          day: d,
          isSign: this.isVerDate(d),
          isSigned: this.isSigned(d),
        };
        if (dddd == 1) {
          this.num++;
        }
        if (this.num == 2) {
          break;
        }
        this.days.push(dayobject);
      }
      // 设置下一个月 需显示 的最前几天铺满一周
      for (var k = 1; k <= 6 - this.nextWeek; k++) {
        d = new Date(nextStr);
        d.setDate(d.getDate() + k);
        dayobject = {
          day: d,
          isSign: this.isVerDate(d),
          isSigned: this.isSigned(d),
        }; // 用一个对象包装Date对象  以便为以后预定功能添加属性
        this.days.push(dayobject); // 将日期放入data 中的days数组 供页面渲染使用
      }
    },
    /**
     * 判断该日期是否有任务
     */
    isVerDate: function (d) {
      var signdays = [];
      for (var i in this.sign_days) {
        signdays.push(this.sign_days[i].day);
      }
      return signdays.includes(d.toLocaleDateString());
    },
    /**
     * 判断该日期是否有任务并且已完成
     */
    isSigned: function (d) {
      var signdays = [];
      for (var i in this.sign_days) {
        if (this.sign_days[i].is_sign) {
          signdays.push(this.sign_days[i].day);
        }
      }
      return signdays.includes(d.toLocaleDateString());
    },
    /**
     * 上一月
     */
    pickPre: function (year, month) {
      var d = new Date(this.formatDate(year, month, 1));
      d.setDate(0);
      this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
    },
    /**
     * 下一月
     */
    pickNext: function (year, month) {
      var d = new Date(this.formatDate(year, month, 1));
      d.setDate(35);
      this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
    },
    // 返回 类似 2020/01/01 格式的字符串
    formatDate: function (year, month, day) {
      month < 10 && (month = "0" + month);
      day < 10 && (day = "0" + day);
      var data = year + "/" + month + "/" + day;

      return data;
    },
    /**
     * 点击日期查询
     */
    dayCheck: function (day) {
      var currentPlan = {
        title: "",
        date: "",
        list: [],
      };
      currentPlan.date =
        day.day.toLocaleDateString().split("/")[1] +
        "月" +
        day.day.toLocaleDateString().split("/")[2] +
        "日";
      for (var i in this.days) {
        this.$set(this.days[i], "isChecked", 0);
      }
      this.$set(day, "isChecked", 1);
      if (day.isSign) {
        if (day.isSigned) {
          // currentPlan.list = [{
          // 	name: '重做计划1',
          // }, {
          // 	name: '重做计划2',
          // }];
          currentPlan.title = "已签到" + this.sign_days.length + "天";
          currentPlan.name = "累计签到奖励";
          currentPlan.nums = 100;
        } else {
          currentPlan.title = "已签到";
        }
      } else {
        currentPlan.title = "未签到";
      }
      this.currentPlan = currentPlan;
    },
    px2rem() {
      var clientWidth = document.documentElement.clientWidth;
      document.documentElement.style.fontSize =
        100 * (clientWidth / 750) + "px";
    },
  },
  created() {
    this.getSign();
  },
  mounted() {
    this.px2rem();
  },
  destroyed() {
    document.documentElement.style.fontSize = "";
  },
};
</script>

<style lang="less" scoped>
.allbox {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.space {
  padding-top: 45px;
}
.content {
  flex: 1;
  background: url("../../assets/signbgimg.png") no-repeat;
  background-size: 100% 100%;
  li,
  ol,
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .topword {
    height: 95px;
    color: #fff;
    margin: 0 15px;
    position: relative;
    div {
      &:first-child {
        font-size: 0.4rem;
        font-weight: bold;
        padding-top: 30px;
      }
      &:nth-child(2) {
        font-size: 0.3rem;
        padding-top: 15px;
      }
      &:last-child {
        font-size: 0.25rem;
        position: absolute;
        top: 0px;
        right: 0px;
        color: #45b7cb;
        background-color: #fff;
        padding: 4px;
        border-radius: 0 0 5px 5px;
      }
    }
  }
  .plan-finish-calendar {
    margin: 20px 15px 0;
  }
  /* 日历 */
  .calendar {
    box-sizing: border-box;
    width: 100%;
    height: 60%;
    background: #fff;
    box-shadow: 0px 3px 24px 0px rgba(0, 0, 0, 0.1);
    border-radius: 0.2rem;
    overflow: hidden;
    font-size: 0.24rem;
    padding: 0 0.3rem;
  }
  .calendar .month {
    background: #ffffff;
    padding: 0.3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    white-space: nowrap;
  }
  .calendar .month li {
    text-transform: uppercase;
    letter-spacing: 0;
  }
  .calendar .month .arrow {
    color: #45b7cb;
    width: 2rem;
    font-size: 0.24rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .calendar .mintui-arrowright {
    font-size: 0.36rem;
    width: 0.16rem;
    height: 0.16rem;
    border-top: 2px solid #45b7cb;
    border-right: 2px solid #45b7cb;
    transform: rotate(45deg);
  }
  .calendar .arrowleft {
    transform: rotate(-135deg);
  }
  .calendar .month .year-month {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.36rem;
    color: #45b7cb;
    font-weight: bold;
  }
  .calendar .weekdays {
    /*头部星期*/
    padding: 0.1rem 0;
    background-color: rgba(21, 188, 195, 0.1);
    border-radius: 0.4rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-bottom: 0.1rem;
  }
  .calendar .weekdays li {
    display: inline-block;
    text-align: center;
  }
  .calendar .days {
    /*日期*/
    background: #ffffff;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    padding-bottom: 0.2rem;
  }
  .calendar .days li {
    list-style-type: none;
    width: 14.2%;
    padding: 1%;
    box-sizing: border-box;
    text-align: center;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .calendar .days li .day-li {
    position: relative;
    width: 0.68rem;
    height: 0.68rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.28rem;
    border-radius: 50%;
    border: 1px solid #fff;
  }
  .calendar .days li .day-checked {
    border-color: #4daac1;
  }
  .calendar .days li .day-li .day-span {
    position: relative;
    width: 0.6rem;
    height: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.28rem;
    border: 1px solid #fff;
    border-radius: 50%;
  }
  .calendar .other {
    color: #ccc;
  }
  .calendar .day-sign {
    /*签到的日期*/
    background-color: #f5f5f5;
    color: #45b7cb;
  }
  .calendar .day-signed {
    background-color: #45b7cb;
    color: #fff;
  }
  .singtip {
    font-size: 0.25rem;
    margin: 10px 15px 0;
    background-color: #fff;
    padding: 15px;
    .showword {
      color: #45b7cb;
    }
    .stempbox {
      display: flex;
      justify-content: space-between;
      color: #28707c;
      .stemp {
        margin-top: 10px;
        width: 32%;
        background-color: #bee6ed;
        padding: 10px;
        box-sizing: border-box;
        border-radius: 4px;
        position: relative;
        img {
          width: 20px;
          position: absolute;
          bottom: 0;
          right: 0;
        }
        div {
          span {
            font-size: 0.4rem;
            font-weight: bold;
          }
          &:first-child {
            margin-bottom: 10px;
          }
        }
      }
    }
  }
  .signbtn {
    text-align: center;
    background-color: #45b7cb;
    height: 40px;
    font-size: 0.3rem;
    line-height: 40px;
    margin-bottom: 15px;
    color: #fff;
    border-radius: 20px;
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 0.25rem;
}
.rules {
  border-radius: 10px;
  width: 300px;
  height: 300px;
  color: #333;
  background-color: #fff;
  div {
    margin: 0 10px;
    margin-bottom: 10px;
    &:first-child {
      font-size: 0.3rem;
      font-weight: bold;
      text-align: center;
      margin-top: 15px;
      margin-bottom: 10px;
    }
    &:last-child {
      margin: 10px auto 0;
      text-align: center;
      line-height: 35px;
      width: 85px;
      height: 35px;
      color: #fff;
      background-color: #45b7cb;
      border-radius: 5px;
    }
  }
}
.signtip {
  position: relative;
  width: 300px;
  height: 210px;
  color: #333;
  background-color: #fff;
  border-radius: 20px;
  .signsuccess {
    height: 70px;
    background: url("../../assets/signnowbg.png") no-repeat;
    background-size: 100%;
    text-align: center;
    color: #fff;
    div {
      font-size: 12px;
      &:first-child {
        font-size: 20px;
        padding: 10px 0 10px;
        font-weight: bold;
      }
    }
  }
  .tosee {
    box-sizing: border-box;
    height: 140px;
    padding: 15px 105px;
    > div {
      height: 110px;
      background-color: #bee6ed;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      img {
        width: 40px;
      }
      div {
        &:nth-child(2) {
          font-weight: bold;
          font-size: 13px;
          color: #28707c;
        }
        &:last-child {
          text-align: center;
          line-height: 24px;
          width: 74px;
          height: 24px;
          font-size: 14px;
          background-color: #fff;
          border-radius: 20px;
          color: #45b7cb;
        }
      }
    }
  }
}
.closebtn {
  position: absolute;
  color: #fff;
  border: 3px solid #fff;
  border-radius: 50%;
  bottom: -55px;
  left: 50%;
  margin-left: -20px;
}
</style>